<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title><?php echo $title;?></title>
    <!-- 设置缩放 -->
    <meta name="viewport" content="minimal-ui,width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    <!-- IOS中禁用将数字识别为电话号码/忽略Android平台中对邮箱地址的识别 -->
    <meta name="format-detection" content="telephone=no" />
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- icon -->
    <link rel="shortcut icon" href="<?php echo ADMIN_ICO_PIC;?>" type="image/x-icon" />
    <!-- css -->
    <link rel="stylesheet" type="text/css" href="<?php echo SYS_LINK;?>admin/css/content.css?v=<?php echo V_CSSJS;?>" />
    <style>
        *{margin:0;padding:0;border:0;outline:0;}
        body{min-width:1050px;font-size:14px;}
        .count-box{overflow:hidden;}
        .count-box a span,#jsNowDateTime{color:#fff;}
        .count-read,.count-visit,.count-ip,.count-date,.count-weather{float:left;display:inline-block;width:15%;min-width:150px;height:60px;margin:20px 0 20px 2%;text-align:center;color:#fff;font-size:18px;padding-top:8px;border-radius: 6px;}
        .count-box .count-read{background:#bc79f5;}
        .count-box .count-visit{background:#2ED8B6;}
        .count-box .count-ip{background:#05d4ef;}
        .count-box .count-date{background:#ff8f00;width:20%;min-width:195px;font-size:14px;}
        .count-box .count-weather{background:#73d008;width:23%;min-width:250px;}
        .count-weather div{padding:0px 20px;}
        .count-date div{padding:3px 0px}
        .count-box font{font-size:14px;}
        .count-box div{padding:2px 0px;}
        .count-charts{overflow:hidden;}
        .count-charts .box{float:left;background:#eee;height:300px;width:47%;}
        .count-charts .count-pie{margin:0px 2% 0px 2%;width:50%;}
        .count-charts .count-fold{margin:0px 2% 0px 0;width:44%;}
        .table_box{margin:20px 2% 0 2%;border:2px solid #6aeafb;}
        .title_box{padding:5px 10px;/*border:1px solid #ebf6ff;background: #ebf6ff;*/font-size:18px;text-align: center;color:#00bcd4;}
        .count-table{height:309px;overflow:hidden;overflow-y:scroll;overflow-x:auto;}
        .table_th{overflow:hidden;overflow-y:scroll;}
        .com-table{width:100%; table-layout:fixed;}
        .com-table td,.com-table th{white-space:nowrap;border:1px solid #ccc;border-top:none;border-left:none;overflow:hidden;max-width:260px;height:20px;}
        .com-table th{border-top:1px solid #ccc;}
        .com-table th:first-child,.com-table td:first-child{border-left:0px solid #999;}
        .com-table tr:first-child th {border-top:none;}
        .com-table td,.com-table th{padding:5px 10px;text-align:center;font-size:12px;font-weight:400;}
        .com-table td a{color:#00bcd4;}
        .com-table td a:hover{color: #14cf90;}
        .com-table td.tdleft{text-align:left;}
        .com-table td.tdleft a{display:block;width:100%;overflow:hidden; white-space:nowrap;text-overflow:ellipsis; }
        .com-table tr:hover td{background:#eee;}
        .count-search{padding:5px 10px 5px 40px;line-height:30px;border: 1px solid #ccc;border-left:none;border-right:none;}
        .input100{border:1px solid #ccc;width:100px;padding:0px 10px;}
        .search-btn{background:#00BCD4;color:#fff;margin-right:20px;}
        .now-list span{color:red;margin-right:20px;}
        .count-infos .count-search input{padding:5px 10px;}
        .ipInfoBtn{color:#0cc6cf;cursor: pointer;}
        .ipInfoBtn:hover{color: #14cf90;}
        .updateAreaBtn{cursor: pointer;}
    </style>
    <script language="javascript">
        var http_url = '<?php echo SYS_HOST;?>';
        var http_link = '<?php echo SYS_LINK;?>';
        var cssjsv = '<?php echo V_CSSJS;?>';
        var http_fix = '<?php echo SYS_URL_FIX;?>';
        var nowDates = "<?php echo date('Y-m-d');?>";  //当前日期
        var url_spline = "<?php echo SYS_URL_PATH('c_client_trend')?>"; // 最近7日
        var url_pie = "<?php echo SYS_URL_PATH('c_client_appratio')?>";
        var url_count_info = "<?php echo SYS_URL_PATH('c_client_dayinfo')?>";
        var url_count_orderby = "<?php echo SYS_URL_PATH('c_client_pageips')?>";
        var url_count_ips = "<?php echo SYS_URL_PATH('c_client_pageipsinfo')?>";
        var url_update_area = "<?php echo SYS_URL_PATH('c_client_updatearea')?>";
    </script>
</head>
<body class=" errMdList">
<!-- top_box (-->
<div class="count-box">
    <a class="count-read">
        <font>今日浏览(PV)</font><br>
        <div>
            <span><?php echo $pvs;?></span>
        </div>
    </a>
    <a class="count-visit">
        <font>今日访客(UV)</font><br>
        <div>
            <span><?php echo $uvs;?></span>
        </div>
    </a>
    <a class="count-ip">
        <font>今日IP数</font><br>
        <div>
            <span><?php echo $ips;?></span>
        </div>
    </a>
    <a class="count-date">
        <font>日期时间</font><br>
        <div>
            <div id="jsNowDateTime"></div>
        </div>
    </a>
    <a class="count-weather">
        <font>天气预报</font><br>
        <div>
            <!--id:1,5,11,15,16,18,24,26,29,30,33,34,41-->
            <iframe name="weather_inc" src="//i.tianqi.com/index.php?c=code&id=24&color=%23FFFFFF&font=10"
                    width="260" height="35" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" ></iframe>
        </div>
    </a>
</div>
<!-- top_box )-->
<!-- charts_box (-->
<div class="count-charts">
    <div class="box count-pie" style="min-width:500px;height:350px">
        <div id="spline_column" style="min-width:400px;height:350px"></div>
    </div>
    <div class="box count-fold" style="min-width:360px;height:350px">
        <div id="pie_s" style="min-width:360px;height:350px"></div>
    </div>
</div>
<!-- charts_box )-->

<!-- table_box (-->
<div class="count-infos">
    <!-- table1_box (-->
    <div class="table_box">
        <div class="title_box">页面访问详情</div>
        <div class="count-search">
            起止时间：<input type="text" id="startDate" class="input100" placeholder="请点击选择日期" />&nbsp;~
            <input type="text" id="endDate" class="input100" placeholder="请点击选择日期" />&nbsp;
            <input type="button" value="查询" class="search-btn" id="search-btn">
            <span class="now-list">
                    浏览数：<span id="now-read"><?php echo $pvs;?></span>
                    访客数：<span id="now-visit"><?php echo $uvs;?></span>
                    IP数：<span id="now-ip"><?php echo $ips;?></span>
                </span>
        </div>
        <div class="table_th">
            <table cellpadding="0" cellspacing="0" border="0" class="com-table">
                <thead>
                <tr>
                    <th width="50">编号</th>
                    <th width="100">来源平台</th>
                    <th >访问页面</th>
                    <th width="60">访问页面%</th>
                    <th width="150">访问时间</th>
                    <th width="100">访问时长</th>
                    <th width="100">访客IP</th>
                    <th width="80">访问应用</th>
                    <th width="100">访客地区</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="count-table">
            <table cellpadding="0" cellspacing="0" border="0" class="com-table">
                <tbody id="nowcountlist">

                </tbody>
            </table>
        </div>
    </div>
    <!-- table1_box )-->

    <!-- table2_box (-->
    <div class="table_box">
        <div class="title_box">页面访问排行榜</div>
        <div class="count-search">
            起止时间：<input type="text" id="startDate2" class="input100" placeholder="请点击选择日期" />&nbsp;~
            <input type="text" id="endDate2" class="input100" placeholder="请点击选择日期" />&nbsp;
            <input type="button" value="查询" class="search-btn" id="search-btn2">
            <!--<span class="now-list">
                    浏览数：<span id="now-read2">0</span>
                    访客数：<span id="now-visit2">0</span>
                    IP数：<span id="now-ip2">0</span>
                </span>-->
        </div>
        <div class="table_th">
            <table cellpadding="0" cellspacing="0" border="0" class="com-table">
                <thead>
                <tr>
                    <th width="50">编号</th>
                    <th width="50">IP数</th>
                    <th width="100">PV数</th>
                    <th width="200">访问页面</th>
                    <th>访问页面URL</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="count-table">
            <table cellpadding="0" cellspacing="0" border="0" class="com-table">
                <tbody id="nowcountlist2">

                </tbody>
            </table>
        </div>
    </div>
    <!-- table2_box )-->
    <br><br>
</div>
<!-- table_box )-->
</body>

<script type="text/javascript" src="<?php echo SYS_LINK;?>admin/js/jquery.min.js?v=<?php echo V_CSSJS;?>"></script>
<script type="text/javascript" src="<?php echo SYS_LINK;?>plug/jedate/jedate.min.js?v=<?php echo V_CSSJS;?>"></script>
<script type="text/javascript" src="<?php echo SYS_LINK;?>plug/layer3.1.1/layer.js?v=<?php echo V_CSSJS;?>"></script>
<script type="text/javascript" src="<?php echo SYS_LINK;?>plug/highcharts/highcharts7.1.js?v=<?php echo V_CSSJS;?>"></script>
<script type="text/javascript" src="<?php echo SYS_LINK;?>admin/js/skin.js?v=<?php echo V_CSSJS;?>"></script>

<script type="text/javascript">

    /******皮肤*******/
    function skinInfos(){
        let skinInfo = localStorage.historyIndexSearchItems;
        let skinInfoArr = [];
        skinInfoArr['highcharts7_back'] = '#ffffff';
        skinInfoArr['highcharts7_color'] = '#333333';
        if(skinInfo != undefined){
            if(skinInfo == 4){
                skinInfoArr['highcharts7_back'] = '#4b5a62';
                skinInfoArr['highcharts7_color'] = '#ffffff';
            }
        }
        return skinInfoArr;
    }

    // 删除空格和字符串
    function trim_all(str,is_global='g'){
        let result;
        result = str.replace("/\\s*/g","");
        if(is_global.toLowerCase()=="g"){
            result = result.replace(/\s/g,"");
        }
        return result;
    }

    // layerIframe
    function layerIframeBox(readUrl, w, h){
        layer.open({
            type: 1,
            title: false,
            shadeClose: true, //开启遮罩关闭
            shade: 0.8,
            area: [w, h], //宽高
            content: readUrl,
            cancel: function(index){
                layer.close(index);
            }
        });
    }

    //////////////////////////////////////////////////////////////////////////////////////

    /**
     * 动态时间
     */
    function check(i){
        if(i<10){
            i="0"+i;
        }
        return i;
    }
    function check2(z){
        var z=z+1900;
        return z;
    }
    function check1(l){
        var l=l+1;
        return l;
    }
    function check3(q){
        if(q == 0){
            q = '日';
        }else if(q == 1){
            q = '一';
        }else if(q == 2){
            q = '二';
        }else if(q == 3){
            q = '三';
        }else if(q == 4){
            q = '四';
        }else if(q == 5){
            q = '五';
        }else if(q == 6){
            q = '六';
        }
        return q;
    }
    function starttime(jsNowDateTime){
        var d = new Date();
        var y = d.getYear();
        var e = d.getMonth();
        var r = d.getDate();
        var q = d.getDay();
        var h = d.getHours();
        var m = d.getMinutes();
        var s = d.getSeconds();
        y = check2(y);
        e = check1(e);
        h = check(h);
        m = check(m);
        s = check(s);
        q = check3(q);
        var datetimestr = y+"年"+e+"月"+r+"日&nbsp;"+h+":"+m+":"+s+"（"+q+"）";
        document.getElementById(jsNowDateTime).innerHTML = datetimestr;
    }
    //动态日期时间控件
    setInterval("starttime('jsNowDateTime')",1000);

    //////////////////////////////////////////////////////////////////////////////////////////////////////

    /**
     * 日期控件初始日期
     */
    var minDate = "2022-01-01";
    jeDate({
        dateCell:'#startDate',
        isTime:false,
        format:'YYYY-MM-DD',
        minDate:minDate,
        maxDate:nowDates
    })
    jeDate({
        dateCell:'#endDate',
        isTime:false,
        format:'YYYY-MM-DD',
        minDate:minDate,
        maxDate:nowDates
    })
    jeDate({
        dateCell:'#startDate2',
        isTime:false,
        format:'YYYY-MM-DD',
        minDate:minDate,
        maxDate:nowDates
    })
    jeDate({
        dateCell:'#endDate2',
        isTime:false,
        format:'YYYY-MM-DD',
        minDate:minDate,
        maxDate:nowDates
    })

    ///////////////////////////////////////////////////////////////////////////////////////////

    /**
     * 图表数据
     */
    function chartsData(){
        var skinInfoArr = skinInfos();
        var highcharts7_back = skinInfoArr['highcharts7_back'];
        var highcharts7_color = skinInfoArr['highcharts7_color'];
        /**
         * 走势图
         */
        $.post(url_spline,{limit:'7'},function(data){
            var chartX = [],chartData = [],readSum = [],visitSum = [],ipSum = [];
            if(data){
                for(var i in data){
                    chartX.push(i);
                    readSum.push(parseInt(data[i].pvs));
                    visitSum.push(parseInt(data[i].uvs));
                    ipSum.push(parseInt(data[i].ips));
                }
                chartData.push(readSum);
                chartData.push(visitSum);
                chartData.push(ipSum);

            }
            chartfun('spline_column', 'spline', chartX, chartData, '近7日访问量走势', highcharts7_back, highcharts7_color);
        },'json');

        /**
         * 饼图
         */
        $.post(url_pie,{limit:'30'},function(data){
            //console.log(data);
            var chartData = [];
            if(data){
                for(i in data){
                    var ny = {"name":data[i].title,"y":parseInt(data[i].sum)};
                    chartData.push(ny);
                }
            }
            chartfun('pie_s', 'pie', [], chartData, '近30天访客应用占比', highcharts7_back, highcharts7_color);
        },'json');
    }
    chartsData();

    /**
     * 图表公共方法
     */
    function chartfun(chartBox, chartType, chartX, chartData, chartTitle, highcharts7_back, highcharts7_color){
        var titleFlag = chartType == 'pie' ? false : true;
        if(chartType == 'pie'){
            var startData = [{name: '访客数',data: []}];
        }else{
            var startData = [{name: 'IP数',data: []},{name: '访客数',data: []},{name: '浏览数',data: []}];
        }
        // Build the chart
        var chart1=Highcharts.chart(chartBox, {
            // 标题
            title: {text: ''},
            // 小标题/注释等
            subtitle: {
                text: chartTitle,
                style:{
                    color:highcharts7_color,
                }
            },
            // 图表基础配置
            chart: {
                backgroundColor: highcharts7_back,
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false,
                type: chartType // 图表类型 默认：spline（走势），line(折线)，column（柱状图），pie(饼图)
            },
            // 版权信息是否显示
            credits:{enabled:false},
            // 打印导出配置
            exporting:{enabled:false},
            // 图例参数
            legend: {
                //floating:true,
                backgroundColor: highcharts7_back,
                itemStyle:{
                    color:highcharts7_color,
                },
                align: 'left',
                verticalAlign: 'top',
                x: 100,
                y: 0,
                //labelFormat: '<span style="{color}">{name} (click to hide or show)</span>'
            },
            // 数据颜色分布（默认样式这里可以重定义）
            colors: ['#7CB5EC','#50B432','#ED561B','#FF9655',  '#DDDF00',
                '#F564ED','#03F2E3',  '#7648FF', '#F7AD05', '#666666'],
            //数据提示框（默认样式这里可以重定义）
            tooltip: {
                //pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
            },
            // 图标类型参数
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    //cursor: 'pointer',
                    dataLabels: {
                        enabled: true   // 数据标题
                    },
                    showInLegend: titleFlag, // 图例展示开关
                }
            },
            // y轴
            yAxis: {
                title: {text: ''},
                labels:{
                    style:{
                        color:highcharts7_color,
                    }
                }
            },
            //x轴
            xAxis: {
                categories: chartX, //x轴标签名称
                gridLineWidth: 0, //设置网格宽度为1
                lineWidth: 1,  //基线宽度
                labels:{y:26},  //x轴标签位置：距X轴下方26像素
                labels:{
                    style:{
                        color:highcharts7_color,
                    }
                }
            },
            // 数据列
            series: startData
        });
        if(chartType == 'pie'){
            chart1.series[0].update({
                data: chartData,
            });
        }else{
            chart1.series[0].update({
                data: chartData[2],
            });
            chart1.series[1].update({
                data: chartData[1],
            });
            chart1.series[2].update({
                data: chartData[0],
            });
        }
    }

    /**
     * 当前检索搜索框日期
     */
    $('#startDate').val(nowDates);
    $('#endDate').val(nowDates);
    $('#startDate2').val(nowDates);
    $('#endDate2').val(nowDates);

    /**
     * 表格数据初始值
     */
    getNowDayList(nowDates, nowDates, 0);
    getCountList(nowDates, nowDates);

    /**
     * 表格数据查询 1
     */
    $('#search-btn').on('click',function(){
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        getNowDayList(startDate, endDate, 1);
    })

    /**
     * 表格-页面访问详情
     */
    function getNowDayList(startDate, endDate, countFlag){
        $.post(url_count_info,{date_start:startDate,date_end:endDate,flag:countFlag},function(data){
            //console.log(data);
            if(data.code==10000){
                if(countFlag){
                    $('#now-read').text(data.data.pvs);
                    $('#now-visit').text(data.data.uvs);
                    $('#now-ip').text(data.data.ips);
                }
                var html = '';
                var sumno = parseInt(data.data.sumno);
                for(var i in data.data.list){
                    var info = data.data.list[i];
                    var keyId = info.id ? info.id : 0;
                    var from_url = info.from_url ? info.from_url : '';
                    var from_title = info.from_title ? info.from_title : '';
                    var page_url = info.page_url ? info.page_url : '';
                    var title = info.page_title ? info.page_title : page_url;
                    var page_rate = info.page_rate ? info.page_rate : '0';
                    var date_start = info.date_start ? info.date_start : '';
                    var times = info.times ? info.times : '';
                    var ip = info.ip ? info.ip : '';
                    var from_app = info.from_app ? info.from_app : '';
                    var district = info.district ? info.district : '';

                    html +='<tr><td width="50">'+sumno+'</td>';
                    html +='<td width="100" title="'+from_title+'"><a href="'+from_url+'">'+from_title+'</a></td>';
                    html +='<td  class="tdleft" title="'+page_url+'"><a href="'+page_url+'" target="_blank">'+title+'</a></td>';
                    html +='<td width="60">'+page_rate+'</td>';
                    html +='<td width="150">'+date_start+'</td>';
                    html +='<td width="100">'+times+'</td>';
                    html +='<td width="100"><a href="https://qifu-api.baidubce.com/ip/geo/v1/district?ip='+ip+'" target="_blank" title="点击查询">'+ip+'</a></td>';
                    html +='<td width="80">'+from_app+'</td>';
                    if(district == '未知'){
                        html +='<td width="100" ><span class="updateAreaBtn" title="点击修改" data_id="'+keyId+'" data_area="'+district+'">'+district+'</span> <a href="https://qifu-api.baidubce.com/ip/geo/v1/district?ip='+ip+'" target="_blank">查询</a></td></tr>';
                    }else{
                        html +='<td width="100" class="updateAreaBtn" title="点击修改" data_id="'+keyId+'" data_area="'+district+'">'+district+'</td></tr>';
                    }
                    sumno --;
                }
                $('#nowcountlist').html(html);
            }else{
                console.log(data);
                console.log('页面访问详情-fail：'+data.msg);
            }
        },'json').error(function(){
            console.log('页面访问详情-error');
        });
    }

    /**
     * 修改访客地区
     */
    $("body").delegate(".updateAreaBtn","click",function(){
        var _this = $(this);
        let area = _this.attr('data_area');
        let id = _this.attr('data_id');
        if(!id){
            layer.msg('异常');return false;
        }
        area = area.split(" ");
        //area = trim_all(area);
        var index = layer.prompt({
            title: '修改所属地区',
            formType: 0 //prompt风格，支持0-2
        }, function(area){
            console.log(id);
            console.log(area);
            $.post(url_update_area,{
                name:area,
                id:id
            },function(res){
                console.log(res);
                if(res.code == 10000){
                    layer.msg('修改成功');
                    setTimeout(function(res){
                        layer.close(index);
                        _this.text(area);
                        _this.attr('data_area', area);
                    },2000);
                }else{
                    console.log('地区修改fail'+res.msg);
                }
            },'json').error(function(){
                console.log('地区修改error');
            })
        });
        $('#layui-layer'+index + " .layui-layer-input").val(area);
    })

    /**
     * 表格数据查询 2
     */
    $('#search-btn2').on('click',function(){
        var startDate = $('#startDate2').val();
        var endDate = $('#endDate2').val();
        getCountList(startDate, endDate);
    })

    /**
     * 表格-页面访问排行榜
     */
    function getCountList(startDate, endDate){
        $.post(url_count_orderby,{date_start:startDate,date_end:endDate},function(data){
            //console.log(data);
            if(data.code==10000){
                var html = '';
                var sumno = parseInt(data.data.sumno);
                for(var i in data.data.list){
                    var info = data.data.list[i];
                    var ipcounts = info.ipcounts == null ? '' : info.ipcounts;
                    var pageurl = info.page_url == null ? '' : info.page_url;
                    var pvs = info.pvs == null ? '' : info.pvs;
                    var title = info.page_title ? info.page_title : '';
                    html +='<tr><td width="50">'+sumno+'</td>';
                    html +='<td width="50" class="ipInfoBtn" data_url="'+pageurl+'">'+ipcounts+'</td>';
                    html +='<td width="100" >'+pvs+'</td>';
                    html +='<td width="200" >'+title+'</td>';
                    html +='<td class="tdleft" title="'+pageurl+'"><a href="'+pageurl+'" target="_blank">'+pageurl+'</a></td>';
                    html +='</tr>';
                    sumno --;
                }
                $('#nowcountlist2').html(html);
            }else{
                console.log(data);
                console.log('页面访问排行榜-fail：'+data.msg);
            }
        },'json').error(function(){
            console.log('页面访问排行榜-error');
        });
    }

    /**
     * 当前链接ip值和访问数
     */
    $("body").delegate(".ipInfoBtn","click",function(){
        let urlStr = $(this).attr('data_url');
        var startDate = $('#startDate').val();
        var endDate = $('#endDate').val();
        $.post(url_count_ips,{
            date_start:startDate,
            date_end:endDate,
            page_url:urlStr
        },function(res){
            console.log(res);
            if(res.code == 10000){
                let html = '<style>';
                html += '.tableThTd{border:0;margin:0;border-collapse:collapse;margin: 10px;}\n' +
                    '  .tableThTd td,.tableThTd th{border:1px solid #ccc;padding:5px 10px;font-size:14px;color:#333;}\n' +
                    '  .tableThTd th{border-left:none;background:#eee;}\n' +
                    '  .tableThTd th:first-child{border-left:1px solid #ccc;}\n' +
                    '  .tableThTd td{border-top:none;border-left:none;}\n' +
                    '  .tableThTd td:first-child{border-left:1px solid #ccc;}';
                html += '</style>';
                html += '<table cellpadding="0" cellspacing="0" border="0" class="tableThTd">';
                html += '<tr><th width="80" align="center">PV数</th> <th >IP</th></tr>';
                for(let i in res.data){
                    html += '<tr><td align="center">'+res.data[i].ipcounts+'</td><td>'+res.data[i].ipstr+'</td></tr>';
                }
                html += '</table>';
                layerIframeBox(html, '240px', '200px');
            }else{
                console.log('当前链接ip值和访问数-fail'+res.msg);
            }
        },'json').error(function(){
            console.log('当前链接ip值和访问数-error');
        })
    })


    window.onload = function () {


    }

</script>
</html>